<template>
	<view class="member-center"
		:style="'padding-top:'+navHeight+';background-image: url('+imagePath+'/images/banner/default/'+(loginCode==0?'member_bg_0':'member_bg_'+memberInfo.level)+'.png)'">
		<view class="top-nav-box" :style="{height:navHeight, paddingTop:statusBarHeight}">
			<view style="width: 100%;font-size: 32rpx;font-weight: 700;color: #fff;text-align: center;">我的会员</view>
		</view>
		<view class="member-vip" v-if="loginCode==1">
			<view style="display: flex;align-items: center;padding: 0 50rpx;">
				<image class="avatar m-r-10" :src="isLogin ? userInfo.avatar : '/static/images/portrait_empty.png'" />
				<view style="display: flex;justify-content: space-between;flex: 1;">
					<view class="name">
						<view class="white bold line-2">{{isLogin ?userInfo.nickname:'游客'}}</view>
					</view>
					<router-link to="/bundle/pages/user_vip/user_vip" class="tips">会员等级说明 ></router-link>
				</view>
			</view>
			<view class="member-score-box"
				:style="'background-image: url('+imagePath+'/images/banner/default/member_box_'+memberInfo.level+'.png)'">
				<view style="position: absolute;top: 210rpx;left: 100rpx;">
					<view class="score-text" :style="'color:'+colorList[memberInfo.level-1].scoreText">
						当前积分{{memberInfo.points}}</view>
					<view class="score-process-box" :style="'background-color:'+colorList[memberInfo.level-1].scoreBox">
						<view class="score-process-bar"
							:style="'background-color:'+colorList[memberInfo.level-1].scoreBar+';width:'+((memberInfo.points/scoreLvl[memberInfo.level-1]>1?1:memberInfo.points/scoreLvl[memberInfo.level-1])*100).toFixed(2)+'%;'">
						</view>
					</view>
				</view>
				<view v-if="(memberInfo.level==2||memberInfo.level==3)&&memberInfo.points>=scoreLvl[memberInfo.level-1]"
					class="member-update" :style="'background-color: '+colorList[memberInfo.level-1].updateBtn+';'"
					@click="updateMemberFun()">升级会员</view>
			</view>
			<image :src="imagePath+'/images/banner/default/member_step_'+memberInfo.level+'.png'"
				style="display: block;height: 65rpx;margin: 40rpx auto;" mode="heightFix"></image>
			<view class="member-role-box" :style="'background-color:'+colorList[memberInfo.level-1].roleBox+';'">
				<image :src="imagePath+'/images/banner/default/member_role_title_1.png'"
					style="width: 126rpx;height: 32rpx;">
				</image>
				<view class="member-role-ad">
					<image v-if="memberInfo.level==1" :src="imagePath+'/images/banner/default/member_role_ad_1.png'"
						style="width: 270rpx;height: 74rpx;">
					</image>
					<image v-if="memberInfo.level==1" :src="imagePath+'/images/banner/default/member_role_ad_2.png'"
						style="width: 270rpx;height: 74rpx;" @click="updateMemberFun()">
					</image>
					<image v-if="memberInfo.level>1"
						:src="imagePath+'/images/banner/default/member_role_ad_'+(memberInfo.level+1)+'.png'"
						mode="widthFix" style="width: 100%;">
					</image>
				</view>
			</view>
			<view class="member-code-box">
				<view class="code-text">
					<text style="font-size: 32rpx;font-weight: 700;">会员码</text>
					<text
						style="font-size: 21rpx;">{{showCode?memberInfo.member_card:memberInfo.member_card.substring(0,4)+'********'}}<text
							style="margin-left: 10rpx;color: #01abe6;" @click="showCode=!showCode">查看数字</text></text>
				</view>
				<view class="code-barcode">
					<tki-barcode ref="barcode" onval cid="barcode" :val="memberInfo.member_card" :load-make="true"
						:opations="{
						width:2,
						height: 134,
						displayValue:false
					}" />
				</view>
				<view class="code-qrcode">
					<tki-qrcode ref="qrcode" onval cid="qrcode" :val="memberInfo.member_card" :size="300" unit="upx"
						:load-make="true" :show-loading="false" />
				</view>
			</view>
		</view>

		<view class="member-none" v-else-if="loginCode==0">
			<view class="member-none-box"
				:style="'background-image: url('+imagePath+'/images/banner/default/member_box_none.png);'">
				<view style="position: absolute;top: 60rpx;left: 40rpx;display: flex;align-items: center;">
					<image class="avatar m-r-10"
						:src="isLogin ? userInfo.avatar : '/static/images/portrait_empty.png'" />
					<view>
						<view class="name">
							<view class="white bold line-2">{{isLogin ?userInfo.nickname:'游客'}}</view>
						</view>
					</view>
				</view>
				<image :src="imagePath+'/images/banner/default/member_ad_1.png'" style="height: 102rpx;"
					mode="heightFix">
				</image>
				<image :src="imagePath+'/images/banner/default/member_ad_2.png'" style="height: 102rpx;"
					mode="heightFix">
				</image>
			</view>
			<view class="member-none-btn">
				<button class="member-login" open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber">授权手机号一键加入会员</button>
				<view class="member-tips">
					<u-checkbox v-model="isAgreement" :icon-size="26" active-color="#edd0a1" :label-size="22">
						确认授权即同意
						<router-link to="/bundle/pages/server_explan/server_explan?type=0"
							style="display: inline-block;color: #01abe6;">
							《服务协议》
						</router-link>
						及
						<router-link to="/bundle/pages/server_explan/server_explan?type=1"
							style="display: inline-block;color: #01abe6;">
							《会员须知》
						</router-link>
						并同意接受该小程序发送的商业信息
					</u-checkbox>
				</view>
			</view>
		</view>
		<tabbar></tabbar>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import Cache from "@/utils/cache";
	import {
		baseURL,
		imagePath
	} from '@/config/app';
	import {
		BACK_URL
	} from "@/config/cachekey";
	import {
		getWxMnpMobile,
		getMemberInfo,
		regMember,
		updateMember
	} from '@/api/user';
	import {
		getWxCode
	} from '@/utils/login'
	import tkiBarcode from '@/components/tki-barcode/tki-barcode'
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode'

	export default {
		components: {
			tkiBarcode,
			tkiQrcode
		},
		data() {
			return {
				imagePath: imagePath,
				loginCode: 0,
				isAgreement: false,
				colorList: [{
					scoreText: '#9b4215',
					scoreBox: '#f8d2bf',
					scoreBar: '#ba5927',
					roleBox: '#fce8dd',
					updateBtn: ''
				}, {
					scoreText: '#4c91b7',
					scoreBox: '#a9d1ec',
					scoreBar: '#469dcb',
					roleBox: '#dbeefd',
					updateBtn: '#4498c7'
				}, {
					scoreText: '#d28624',
					scoreBox: '#f8d49b',
					scoreBar: '#e89938',
					roleBox: '#fdf6e2',
					updateBtn: '#e49633'
				}, {
					scoreText: '#ae394a',
					scoreBox: '',
					scoreBar: '',
					roleBox: '#f9e4e5',
					updateBtn: ''
				}],
				scoreLvl: [200, 1000, 2000],
				showCode: false,
				code: '',
				mobile: '',
				memberInfo: {},
				requireUrl: ""
			};
		},
		onShow() {
			this.getMemberInfoFun()
			// #ifdef MP-WEIXIN
			getWxCode().then(res => {
				this.code = res
			})
			// #endif
		},
		methods: {
			async getMemberInfoFun() {
				const {
					data,
					code
				} = await getMemberInfo(this.token);
				if (code == -1) {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				} else if (code == 1) {
					this.memberInfo = data
				}
				this.loginCode = code
			},
			async regMemberFun() {
				const {
					data,
					code
				} = await regMember({
					token: this.token,
					mobile: this.mobile
				});
				if (code == 1) {
					this.memberInfo = data
					if (Cache.get(BACK_URL)) {
						this.$Router.replace(Cache.get(BACK_URL));
						Cache.remove(BACK_URL);
					}
				}
				this.loginCode = code
			},
			async updateMemberFun() {
				const {
					data,
					code
				} = await updateMember({
					token: this.token,
					mobile: this.mobile
				});
				if (code == 1) {
					this.memberInfo = data
				}
			},
			// 微信获取手机号
			// #ifdef MP-WEIXIN
			async getPhoneNumber(e) {
				if (!this.isAgreement)
					return this.$toast({
						title: '请先勾选"确认授权即同意《服务协议》及《会员须知》并同意接受该小程序发送的商业信息"',
					});
				const {
					encryptedData,
					iv
				} = e.detail;
				const params = {
					token: this.token,
					code: this.code,
					encrypted_data: encryptedData,
					iv
				}
				if (encryptedData) {
					const {
						data,
						code,
						msg
					} = await getWxMnpMobile(params)
					if (code == 1) {
						this.$toast({
							title: msg
						});
						// #ifdef MP-WEIXIN
						getWxCode().then(res => {
							this.code = res
						})
						// #endif
						this.mobile = data.mobile
						this.regMemberFun();
					}
				}
			},
			// #endif
		},
		computed: {
			...mapGetters(['token', 'sysInfo', 'userInfo']),
			statusBarHeight() {
				return this.sysInfo.statusBarHeight + 'px'
			},
			navHeight() {
				this.userInfo;
				this.appConfig
				return this.sysInfo.navHeight + 'px'
			},
		}
	};
</script>
<style lang="scss" scoped>
	.member-center {
		background-color: #f9f9f9;
		background-size: 100% auto;
		background-repeat: no-repeat;

		.top-nav-box {
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			top: 0;
			z-index: 1;
		}

		.member-none {
			padding: 50rpx;

			.member-none-box {
				position: relative;
				display: flex;
				width: 100%;
				height: 608rpx;
				padding: 0 48rpx 40rpx;
				background-repeat: no-repeat;
				background-size: contain;
				justify-content: space-between;
				align-items: flex-end;

				.avatar {
					height: 74rpx;
					width: 74rpx;
					border-radius: 50%;
					overflow: hidden;
				}

				.name {
					text-align: left;
					margin-bottom: 5rpx;
					font-size: 25rpx;
					color: #fff;
				}
			}

			.member-none-btn {
				margin-top: 300rpx;

				.member-login {
					width: 560rpx;
					height: 105rpx;
					margin: 0 auto;
					background-image: linear-gradient(to bottom right, #edd0a1, #dfaf72);
					border-radius: 105rpx;
					font-size: 34rpx;
					font-weight: 700;
					color: #312c14;
					text-align: center;
					line-height: 105rpx;
				}

				.member-tips {
					padding: 20rpx 40rpx;
				}
			}
		}

		.member-vip {
			margin-top: 20rpx;

			.avatar {
				height: 45rpx;
				width: 45rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.name,
			.tips {
				text-align: left;
				font-size: 22rpx;
				color: #fff;
			}

			.member-score-box {
				position: relative;
				width: 100%;
				height: 294rpx;
				margin-top: 20rpx;
				background-size: 100% auto;
				background-repeat: no-repeat;

				.score-text {
					font-size: 22rpx;
				}

				.score-process-box {
					position: relative;
					width: 358rpx;
					height: 7rpx;
					margin-top: 15rpx;
					border-radius: 7rpx;

					.score-process-bar {
						position: absolute;
						top: 0;
						left: 0;
						height: 7rpx;
						border-radius: 7rpx;
					}
				}

				.member-update {
					position: absolute;
					width: 144rpx;
					height: 45rpx;
					right: 100rpx;
					bottom: 20rpx;
					border-radius: 45rpx;
					font-size: 25rpx;
					font-weight: 700;
					color: #f8fcfe;
					line-height: 45rpx;
					text-align: center;
				}
			}

			.member-role-box {
				padding: 40rpx;
				margin: 0 40rpx;
				border-radius: 20rpx;

				.member-role-ad {
					display: flex;
					margin-top: 30rpx;
					justify-content: space-between;
				}
			}

			.member-code-box {
				padding: 40rpx;
				margin: 20rpx 40rpx;
				background-color: #fff;
				border-radius: 10rpx;

				.code-text {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.code-barcode,
				.code-qrcode {
					width: 100%;
					margin-top: 20rpx;
					text-align: center;
				}
			}
		}
	}
</style>